<template>
  <div v-loading="loading" class="app-container">
    <main-title title="基本信息" />
    <el-form :ref="formName" :model="form" :rules="rules" label-width="110px" :disabled="type === 'info'">
      <el-form-item label="公告名称" prop="title">
        <el-input v-model="form.title" placeholder="公告名称" />
      </el-form-item>
      <el-form-item label="公告内容" prop="content">
        <ckEditor :past-editor.sync="form.content" :is-read-only="type === 'info'" />
      </el-form-item>
    </el-form>
    <div class="dialog-footer-center">
      <span>
        <el-button v-if="type !== 'info'" type="primary" :loading="btnLoading" @click="handleSubmit">保存</el-button>
        <el-button @click="handleCancel">{{ type === 'info' ? '返回' : '取消' }}</el-button>
      </span>
    </div>
  </div>
</template>

<script>
import mainTitle from '@/components/mainTilte/mainTilte'
export default {
  name: 'NoticeAdd',
  components: {
    mainTitle
  },
  data() {
    return {
      id: '',
      type: '',
      formName: 'form',
      form: {
        title: '', // 公告名称
        content: '' // 公告内容
      },
      rules: {
        title: [
          { required: true, message: '请输入公告名称', trigger: 'blur' },
          { max: 100, message: '公告名称必须在100个字符以内', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入公告内容', trigger: 'blur' }
        ]
      },
      btnLoading: false,
      loading: false
    }
  },
  computed: {},
  watch: {
    $route(router) {
      this.checkRouterHasId(router)
    }
  },
  created() {
    const vm = this
    const { type } = vm.$route.params
    vm.type = type
    vm.checkRouterHasId(vm.$route)
  },
  methods: {
    // 检查路由是否有id
    checkRouterHasId(router) {
      const vm = this
      const id = router.params.id
      if (id) {
        vm.id = id
        vm.getInfo()
      }
    },
    // 获取详情
    getInfo() {
      const vm = this
      vm.loading = true
      vm.$http
        .get(`/notice/${vm.id}`)
        .then((res) => {
          vm.form.title = res.data.title
          vm.form.content = res.data.content
          vm.loading = false
        })
        .catch(() => {
          vm.loading = false
        })
    },
    // 确定
    handleSubmit() {
      const vm = this
      vm.$refs[vm.formName].validate((valid) => {
        if (valid) {
          vm.btnLoading = true
          vm.id ? vm.edit() : vm.add()
        }
      })
    },
    // 添加
    add() {
      const vm = this
      vm.$http
        .post('/notice', vm.form)
        .then((res) => {
          vm.$message.success('添加成功')
          vm.handleCancel()
          vm.btnLoading = false
        })
        .catch((err) => {
          console.log(err)
          vm.btnLoading = false
        })
    },
    // 编辑
    edit() {
      const vm = this
      vm.$http
        .put(`/notice/${vm.id}`, vm.form)
        .then((res) => {
          vm.$message.success('编辑成功')
          vm.handleCancel()
          vm.btnLoading = false
        })
        .catch((err) => {
          console.log(err)
          vm.btnLoading = false
        })
    },
    // 取消
    handleCancel() {
      const vm = this
      vm.$refs[vm.formName].resetFields()
      // vm.$router.push({ path: `/system/notice` })
      vm.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped></style>
